<template>
  <div>
    <!-- 转让弹出框 -->
    <CommonDialog
      title="转让"
      width="75%"
      v-bind:dialogVisible="transferDialogVisible"
      @on-change-dialogVisible="transferChange"
      class="creatFeedForm"
      top="10vh"
    >
      <template #body>
        <el-form class="transferForm" :model="transferForm" label-position="top" ref="transferFormRef">
          <el-row type="flex" justify="spce-betweeen">
            <el-col :span="12">
              <el-form-item
                label="接收人"
                class="nowStage"
                prop="feedBackId"
                :rules="[
                  {
                    required: true,
                    message: '请选择接收人',
                    trigger: 'change'
                  }
                ]"
              >
                <el-select v-model="transferForm.feedBackId" clearable filterable placeholder="请选择指派人">
                  <el-option v-for="(item, index) in userDOlist" :key="index" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="spce-betweeen" :gutter="20" style="margin-top: 8px">
            <el-col :span="24">
              <el-form-item
                label="转让原因"
                prop="feedBackReason"
                class="applicationReason"
                :rules="[
                  {
                    required: true,
                    message: '请输入转让原因',
                    trigger: 'change'
                  }
                ]"
              >
                <!-- <vue-tinymce v-model="transferForm.feedBackReason"
                             :setting="setting" /> -->
                <!-- <socialUpload
                  :contentDefault="transferForm.feedBackReason"
                  @getContent="getContent"
                ></socialUpload> -->
                <!-- <quill-editor
             v-model="transferForm.feedBackReason"
              ref="suspendReasonEditor"
            >
            </quill-editor> -->
                <el-input type="textarea" v-model="transferForm.feedBackReason"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
      <template #dialog_footer>
        <el-button class="insertCancel" @click="transferCancel">取 消</el-button>
        <el-button type="primary" @click="confirmtransfer" class="insertReme">确认</el-button>
      </template>
    </CommonDialog>
  </div>
</template>

<script>
import CommonDialog from '@/components/commonDialog/commonDialog.vue'
import { FeedBack } from '@/api/feedBack/server'
export default {
    name: '',
    components: {
        CommonDialog
    },
    props: {},
    data() {
        return {
            // 控制转让弹出框的显示和隐藏
            transferDialogVisible: false,
            userInfo: {},
            userDOlist: [],
            tableItemsId: '',
            transferForm: {
                feedBackId: '',
                feedBackReason: '',
                title: ''
            },
            setting: {
                branding: false,
                menubar: false,
                toolbar:
          'undo redo | fullscreen | formatselect alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image media table | fontselect fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat |',
                toolbar_drawer: 'sliding',
                quickbars_selection_toolbar:
          'removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor',
                plugins: 'link image  table lists fullscreen',
                language: 'zh_CN',
                init_instance_callback: editor => {
                    if (this.content) {
                        editor.setContent(this.content)
                    }
                    this.finishInit = true
                    editor.on('NodeChange Change SetContent KeyUp', () => {
                        this.hasChanged = true
                    })
                }, // 上传图片
                convert_urls: false,
                automatic_uploads: true, // 开启点击图片上传时，自动进行远程上传操作
                images_upload_base_path: `${process.env.VUE_APP_GOLDWIND_BASE_API}`, // 图片上传的基本路径
                images_upload_url: '/v2/file/upload',
                images_upload_handler: (blobInfo, success, failure) => {
                    var xhr, formData

                    xhr = new XMLHttpRequest()
                    xhr.withCredentials = false
                    xhr.open('POST', `${process.env.VUE_APP_GOLDWIND_BASE_API}` + '/v2/file/upload')
                    xhr.setRequestHeader('token', JSON.parse(sessionStorage.getItem('USERINFO')).token)
                    // xhr.setRequestHeader('token', localStorage.getItem('token'));

                    formData = new FormData()
                    formData.append('file', blobInfo.blob())

                    formData.append('checkOfficeFmt', false)
                    formData.append('isTmp', false)
                    xhr.onload = function(e) {
                        var json
                        console.log(e, xhr)
                        console.log(this)

                        if (xhr.errcode == '0') {
                            failure('服务器错误:' + xhr.msg)
                            return
                        }
                        json = JSON.parse(this.responseText)
                        if (!json.data || typeof json.data.fileSourceId != 'string') {
                            failure('服务器错误')
                            return
                        }
                        success(
                            `${process.env.VUE_APP_GOLDWIND_BASE_API}` +
                '/v2/file/download?' +
                '&fileSourceId=' +
                json.data.fileSourceId
                        )
                    }
                    xhr.send(formData)
                },
                image_advtab: false,
                language_url: 'tinymce/langs/zh_CN.js', // 语言包的路径
                elementpath: false, // 隐藏元素路径，不明白的可以切换true/false观察页面
                statusbar: false,
                resize: false,
                height: 200
            }
        }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
        show(id, productId) {
            this.tableItemsId = id
            this.productionChange(productId)
            this.transferDialogVisible = true
            this.UserGetUserInfoAsync()
        },
        async UserGetUserInfoAsync() {
            try {
                const result = await FeedBack.UserGetUserInfoAsync()
                if (result.success) {
                    this.userInfo = result.data
                }
            } catch (err) {
                console.log(err)
            }
        },
        /* 传递过去的人员列表 */
        async productionChange(_val) {
            try {
                const result = await FeedBack.GetListItemAsync({ id: _val })
                if (result.success) {
                    /* 过滤当前责任人 */
                    const arr = JSON.parse(JSON.stringify(result.data))
                    let index = ''
                    for (var i = 0; i < arr.length; i++) {
                        const item = arr[i]
                        if (item.id === this.userInfo.id) {
                            index = i
                        }
                    }
                    arr.splice(index, 1)
                    this.userDOlist = arr
                }
            } catch (err) {
                console.log(err)
            }
        },
        transferCancel() {
            this.$refs['transferFormRef'].resetFields()
            this.transferDialogVisible = false
            this.$refs['transferFormRef'].resetFields()
        },
        // 确认转让
        confirmtransfer() {
            const objParams = {
                title: this.transferForm.title,
                content: this.transferForm.feedBackReason,
                id: this.tableItemsId,
                operationType: 3,
                userId: this.transferForm.feedBackId
            }
            this.$refs['transferFormRef'].validate(valid => {
                if (valid) {
                    this.transfer(objParams)
                    this.transferDialogVisible = false
                } else {
                    this.$message.error('请检查表单信息是否填写完整')
                    return false
                }
            })
        },
        // 转让
        async transfer(params) {
            try {
                const result = await FeedBack.OperationAsync(params)
                if (result.success) {
                    this.transferDialogVisible = false
                    this.transferForm = {
                        feedBackId: '',
                        feedBackReason: '',
                        title: ''
                    }
                    this.$emit('refreshPage')
                }
            } catch (error) {
                console.log(error)
            }
        },
        transferChange(val) {
            this.transferDialogVisible = val
            this.$refs['transferFormRef'].resetFields()
        },
        /**
     * @description: 获得转让原因
     * @param {String} Value
     */
        getContent(Value) {
            this.transferForm.feedBackReason = Value
        }
    }
}
</script>

<style scoped lang="less">
::v-deep .applicationReason textarea {
  height: 200px;
  background: #ffffff;
  border: 1px solid #dadee0;
  border-radius: 2px;
}
</style>
